Chapter 2

Using VBScript with HTML Controls

• What Are HTML Intrinsic Controls?
• Making HTML Controls Interactive with VBScript
• Spicing Up a Home Page with VBScript
• Attaching VBScript to an HTML Hyperlink
• Adding a Custom Procedure
• Adding a Global Variable
• Adding a Simple Array
• Workshop Wrap-Up
• Next Steps
• Q&A
  

Adding active content to your Web site doesn't mean that you have to scrap the pages you've probably spent a long time writing, maintaining, and developing. In fact, you can do a lot very quickly and easily to improve your Web site with active content utilizing your current Web pages and HTML controls.

Your current Web pages are probably filled to the brim with HTML controls and objects. Submit buttons, text boxes, and so on-anything that you added to the page using the HTML <INPUT> tag (and more besides)-are known as intrinsic HTML controls, and you can interface them with VBScript using the ActiveX Control Pad.

HTML controls and objects don't give you anything that approximates the functionality of an ActiveX control, but they have the advantage of always being immediately available to every user, which means they will load faster. Anyone with a browser capable of handling scripts gets the full benefit of your Web page, and even those Web surfers with browsers that don't know an ActiveX control from a hole in the ground still see the complete page, albeit without the scripted functionality.

As the Web continues its never-ending but ever-quickening development, you can avoid excluding certain visitors to your site by using a mixture of straightforward HTML Web pages, pages that combine HTML objects and active scripting, and pages that make full use of ActiveX controls. This chapter is devoted to the middle ground, helping you to recycle some of your current pages and bring them up to date using HTML intrinsic controls and objects linked to active scripting.

What Are HTML Intrinsic Controls?

If you've spent more than five minutes using HTML, then you've probably used HTML intrinsic controls-but you might not have called them intrinsic controls. HTML intrinsic controls are usually associated with a <FORM> tag and defined in the HTML page using the <INPUT> tag, although it is possible to use them outside the <FORM> tag. For example, hyperlinks can be treated as controls. HTML intrinsic controls are not as flexible as ActiveX controls; after all, they were never designed to do more than gather simple input from the user and pass this input to the server. For example, you can't change the font sizes and colors of an HTML intrinsic control. The following list outlines the main HTML intrinsic controls:

• Text box: A single-line text box for data input.
• Password: A single-line area to enter text; the screen output is replaced by asterisks.
• Submit button: A command button that instructs the browser to send the matched data field names and values to the server.
• Reset button: A command button that instructs the browser to reset all controls in the form to their default values.
• Button: Rarely used in normal HTML documents because it requires an attached script to give it functionality.
• Audio or radio button: A round option button used in sets when you're asking the user to make a choice of one from many.
• Checkbox: A square button used either singularly or in sets when you're asking the user to select fixed options.
• Select: A drop-down list of options; although it is not specified with the <INPUT> tag, it is still treated as an intrinsic control.

You can also treat HTML hyperlinks and anchors as intrinsic controls, although in the strict sense, they aren't controls. What I mean by this is that you must attach code to them manually because the ActiveX Control Pad doesn't recognize them as programmable controls.

HTML intrinsic controls have programmable events; that is, you can attach a subroutine or event handler to the control so that when the user clicks a button, for example, the program or script executes. Again, HTML intrinsic controls do not give you the depth of functionality that an ActiveX control does, but you will find them adequate for most situations.

Making HTML Controls Interactive with VBScript

To demonstrate how simply and quickly you can add ActiveX scripting to an HTML page, you're going to create a page that allows you to type a text or numerical value in one text box and then shows it in another text box when you press the button. You've got to start somewhere!

First, open the ActiveX Control Pad and, using the template it offers, create an HTML page with some HTML intrinsic controls on it. The following code shows the first part:

<HTML>
<HEAD>
<TITLE>The easy peasy VBScript page</TITLE>
</HEAD>
<BODY BGCOLOR="white">
<CENTER>
<H2>Wow...this is easy!!</H2><P>

Start the definition of an HTML form; as you can see, this is a form with a difference.

<FORM NAME="Form1">

The first thing that you notice about the preceding <FORM> tag is that it has a name, which you do not usually give to an HTML form. You provide the name here so that you can easily reference the form within the Script Wizard. The other thing to note is that the ACTION and METHOD elements of the form tag are missing; because the data in this form isn't submitted anywhere, these elements are irrelevant.

Enter the first of the HTML intrinsic controls, text1. The definition is exactly the same as you would enter for any HTML text box within an HTML form:

<INPUT TYPE=TEXT NAME="text1">

Include a paragraph break, the second text box, and another paragraph break:

<P>
<INPUT TYPE=TEXT NAME="text2">
<P>

Add an HTML button. Although you're probably accustomed to using SUBMIT or RESET buttons, you can use the straightforward BUTTON type rather than SUBMIT because you don't want the data to be sent anywhere. Call it cmdButton1. Set the caption on the face of the button to Click Me using the VALUE element:

<INPUT TYPE=BUTTON NAME="cmdButton1" VALUE="Click Me">

Finish the rest of the normal HTML as follows:

</FORM>
</CENTER>
</BODY>
</HTML>

Save the file as vbeasy.htm, and open it in your Microsoft Internet Explorer 3.0 browser. It should look like the file in Figure 2.1.

Figure 2.1 : Your vbeasy.htm file as it should look in the browser.

Create the VBScript subroutine that copies whatever you typed in the top text box into the bottom text box when you click the button. Attach the subroutine to the button, and because it should execute every time the button is clicked, link the subroutine to the button's OnClick event. Open the file you've just created (vbeasy.htm) in the ActiveX Control Pad.

Open the ActiveX Script Wizard either by clicking the Script button (which looks like an ancient scroll) or by selecting Script Wizard from the Tools menu.

In the left Events pane, you can see that the Script Wizard recognizes the Form1 HTML form as an object. You attach the script to the click event of the cmdButton1, which is contained within Form1, by performing the following steps:

1. Click the plus sign to the left of the Form1 object. The Script Wizard displays the contents of Form1, including the only form event, OnSubmit.
2. Click the plus sign to the left of the cmdButton1, which displays the events (or should I say, event) available for the cmdButton1 button.
3. Select the OnClick event by clicking it once.

Your Script Wizard should look like the one in Figure 2.2.

Figure 2.2 : The Script Wizard displaying the events and objects for your Form1 HTML object.

You want the button's click event to act upon the text2 text box, so specify the action that the event takes as follows:

1. In the right Action pane, click the plus sign to the left of Form1. The Script Wizard displays the objects within the form along with the properties and methods available for the form.
2. Click the plus sign to the left of the Text2 object. You can see the individual properties and methods for the Text2 object.
3. Double-click the Value property.

The dialog box that is now displayed, shown in Figure 2.3, invites you to enter a value to be displayed in the text box.

Figure 2.3 : Click on the Custom button to display the custom value dialog.

However, you don't want to enter an explicit text string here because you want to display whatever is held in the value of Text1, which is a variable value. To enter a variable, perform the following steps:

1. Click the Custom button. You see the dialog box shown in Figure 2.4, which allows you to enter the variable name.
2. Enter Form1.Text1.Value in the dialog box. This Value property holds the text string that has been entered into the Text1 textbox. When cmdButton1 is clicked, Text1's Value property is assigned to Text2's Value property, thereby displaying the contents of Text1 in Text2.
3. Click OK.

Figure 2.4 : The custom dialog lets you enter variable names rather than explicit values.

The Script Wizard generates the required <INPUT> tag for the button, which includes the language element that tells the browser which scripting engine to use, the event (in this case, OnClick), and the actual code itself (Document.Form1.text2.value = Form1.Text1.Value). Your vbeasy.htm HTML source, complete with VBScript code, should look like what you see in Figure 2.5. I've dropped down part of the line containing the button definition so that you can read it. (By default, ActiveX uses a much wider screen.)

Figure 2.5 : vbeasy.htm in the ActiveX Control Pad.

All you need to do is save the file and run it with your Internet Explorer browser. Type some text in the top text box and click the button, and if all goes well, the string from the top text box is copied automatically into the bottom text box.

Spicing Up a Home Page with VBScript

Now, you'll make a currently flat (by which I mean normal, inactively HTML coded) HTML home page interactive using only VBScript and HTML-not an ActiveX control for miles around. For an example, you're going to use the fictitious home page shown in Figure 2.6. You can find the current home page on the CD-ROM at \SOURCE\
chAPTER2\INDEX1.htm. Although the page is adequate, it's hardly what you'd term interactive.

Figure 2.6 : The home page of the Apprentice Lumberjacks.

In this example, you add only a text box; the rest of the page remains as it is, with the addition, of course, of some simple VBScript. One of the main things this demonstrates to you is the use of scripts attached to HTML hyperlinks, which can add great value to any page.

Here's what you're going to do with this home page:

• Add a text box to display descriptions of the links.
• Add a custom procedure for each link to display the description whenever the mouse passes over the link.
• Add a custom procedure to display an Alert box when the user clicks a certain link.

First, load the file into the ActiveX Control Pad, as shown in Figure 2.7.

Figure 2.7 : The HTML source for the home page.

Directly above the first hyperlink, create a simple HTML form called Form1 and add an HTML text box with a width of 40 and the name Text1. This is the text box that is used to display the descriptions of the links. The form is necessary in HTML to let you reference the text box from a script.

<FORM NAME="Form1">
<INPUT TYPE="text" NAME="text1" SIZE=40><P>
</FORM>

Attaching VBScript to an HTML Hyperlink

To attach scripts to the hyperlinks, you must give them names by including ID elements within the <A HREF> tags. Call the first link Link1, the second Link2, and so on, like this:

<A HREF="" ID="Link1">The Lumberjack Apprentices Song</A><P>
<A HREF="" ID="Link2">Tree Felling Jokes</A><P>
<A HREF="" ID="Link3">Axe Men in the News</A><P>
<A HREF="" ID="Link4">Chainsaw Tips and Tricks</A><P>
<A HREF="" ID="Link5">Other Lumberjack Websites</A>

To attach code to HTML hyperlinks, perform the following steps:

1. Specify which scripting engine the browser must use.
2. Specify the event that triggers the execution of a procedure.
3. Specify the name of the procedure to execute.

After each ID reference, add the Language element and the OnMouseOver event-as though it too is an HTML element. Finally, reference the soon-to-be-created ShowDesc custom procedure:

LANGUAGE="vbscript" OnMouseOver="ShowDesc()"

The parentheses after ShowDesc contain a value that is passed to the procedure and used to determine which of five different descriptions should be displayed. Number these from 0 to 4. Your links section should now look like the following code:

<A HREF="" ID="Link1" LANGUAGE="VBScript" OnMouseOver="ShowDesc(0)" >
The Lumberjack Apprentices Song</A><P>
<A HREF="" ID="Link2" LANGUAGE="VBScript" OnMouseOver="ShowDesc(1)" >
Tree Felling Jokes</A><P>
<A HREF="" ID="Link3" LANGUAGE="VBScript" OnMouseOver="ShowDesc(2)" >
Axe Men in the News</A><P>
<A HREF="" ID="Link4" LANGUAGE="VBScript" OnMouseOver="ShowDesc(3)" >
Chainsaw Tips and Tricks</A><P>
<A HREF="" ID="Link5" LANGUAGE="VBScript" OnMouseOver="ShowDesc(4)" >
Other Lumberjack Websites</A>

As far as the HTML alterations go, that's really all you need to do. The next thing you need is a procedure that is executed every time the mouse passes over a link.

Launch the Script Wizard either by clicking the Script button or by selecting Script Wizard from the Tools menu. You'll notice that the left Events pane contains only the window object and the text box control because the hyperlinks are not treated as controls or objects.

Adding a Custom Procedure

Because hyperlinks are not treated as controls or objects, you must attach the code by hand as a custom procedure as follows:

1. Right-click anywhere in the right Actions pane to display the Actions pop-up menu.
2. Select New Procedure from the pop-up menu. The caption above the code window reads "Procedure1 performs the following Actions."
3. Select the Code View option button at the bottom of the Script Wizard dialog. The code window changes to allow you to type in code directly, as shown in Figure 2.8. It is in fact two separate sections if you look closely; the top section contains only the name of the procedure, known as the procedure prototype, and the lower section is where you type the script.
4. Change the procedure name from Procedure1 to ShowDesc, and inside the parentheses, enter the word LinkNo.
   Figure 2.8 : The script section of the Script Wizard in Code View mode.
   Sub ShowDesc(LinkNo)
5. Move to the lower section of the code window and enter the following code:
   Document.Form1.Text1.Value = LinkDesc(LinkNo)
   I'll explain the right side of the preceding code. LinkDesc is the name you give to an array that holds the descriptions. LinkNo is the name that you give to a variable that stores the number, which enters the procedure from the link definition. Chapter 10, "Using the Power of Arrays," covers arrays in detail. An array is a series of data values that can be accessed individually by their ordinal numbers-that is, where they are in the array. One twist is that arrays in VBScript can only start at position 0. As a result, the first data element of an array must be accessed using the number 0. Look back at the definition you entered for the links:
   <A HREF="" ID="Link1" LANGUAGE="VBScript" OnMouseOver="ShowDesc(0)" >
   The Lumberjack Apprentices Song</A><P>
   Because this is the first link, you need to pass the number 0 to the ShowDesc procedure, which then gets the first description string from the LinkDesc array and copies it into the Text1 text box.
6. Add the following line of code, which effectively disables the status message at the bottom of the browser window when the mouse passes over one of the links.
   Window.Status = ""

The procedure is now complete, and your window should look like the one in
Figure 2.9.

Figure 2.9 : The completed custom procedure within the Script Wizard.

Adding a Global Variable

You need to add the definition for the array that holds the description strings for each link. You want the script engine to load the data into the array only once as the page downloads to the browser; therefore, you need to use a global variable for the array. A global variable is available to all procedures in all scripts within the same HTML document. Global variables are defined outside any subroutine or function but inside the <SCRIPT> tags. Variables in VBScript are covered at length in Chapter 4 "Using the VBScript Language." The ActiveX Script Wizard makes it easy to define global variables as follows:

1. Right-click in the right Actions pane of the Script Wizard to invoke the Action pop-up menu.
2. Select the New Global Variable option to display the New Global Variable dialog box, as shown in Figure 2.10.
3. Enter the name LinkDesc(4) into the New Global Variable dialog box. This instructs the script engine to create an array with five elements-which means 4 is the highest number. Click OK.

Figure 2.10: Enter a name for the new global variable.

Before you leave the Script Wizard, click the plus signs to the left of the Global Variables and Procedures items in the right pane. You see that the items you entered are shown within the object hierarchy for this page. Click OK for the Script Wizard to generate the script, which should look like what you see in Figure 2.11.

Figure 2.11: The Script Wizard generates all the code for both the custom procedure and global variable.

Adding a Simple Array

The final stage of this makeover is adding the script that puts the descriptions of the links into the array LinkDesc. You have to do this manually because the Script Wizard doesn't have a facility for generating script code outside a subroutine or function. Directly under the definition of the array, dim LinkDesc(4), enter the following code:

LinkDesc(0)="This is link One"
LinkDesc(1)="This is link Two"
LinkDesc(2)="This is link Three"
LinkDesc(3)="This is link Four"
LinkDesc(4)="This is link Five"

Because this section of code is outside a subroutine or function, it is executed once as the HTML page is downloaded to the browser. As the page is displayed, the array is full of data and ready to be used. You can enter somewhat more interesting descriptions than the ones I've shown here, which emphasize the care that you must take with arrays starting with the element 0.

Save the file and run it through your trusty Internet Explorer to instantly impress your friends and neighbors with your programming prowess.

Workshop Wrap-Up

Using VBScript with HTML controls is the easiest way to quickly build some active content into your Web pages without major disruption to your Web site. It's also a great way to start learning about what scripting and active content can do.

HTML intrinsic controls look and feel a little clunky after you've been playing with ActiveX controls, but the fact that HTML intrinsic controls load and run in the same time frame as the rest of the Web page is still a major advantage until everyone has fast direct or ISDN connections to the Web.

Next Steps

Now that you've seen how quickly and easily you can add VBScript to any HTML Web page, you can work on improving your VBScript skills to write more complex and meaningful scripts.

• Chapter 4 "Using the VBScript Language," discusses more about VBScript itself. Depending on what you need to achieve, consult any or all of the chapters in Part II, "Mastering the VBScript Language."
• To learn more about the ActiveX Control Pad, see Chapter 13, "Implementing an ActiveX Menu Control."
• Chapter 10, "Using the Power of Arrays," outlines more information about arrays.
• To take another, in-depth look at using VBScript with HTML objects, see Chapter 5 "Interfacing VBScript with an HTML Form."
• Using VBScript with image maps is covered in Chapter 17, "Using Client-Side Image Maps-the Easy Way."

Q&A